<template>
  <div class="w-full h-full px-1.5 bg-sky-50">
    <div class="h-1/2 text-blue-400 font-bold">
      <!-- 标题 -->
      <div
        class="w-full h-14 flex justify-center items-center bg-blue-400 text-white"
      >
        <h1>{{ title }}</h1>
      </div>
      <!-- 科室排名 -->
      <div style="height: calc(100% - 56px)">
        <dv-border-box12 class="p-2" :color="['#c7e1fd', '#5fa4f8']" :backgroundColor="'rgba(255, 255, 255, 1)'">
          <span class="ml-2 text-lg">门诊人次科室排名</span>
          <BarChart
            :data="barData"
            unit="人次"
            title="单位"
            class="w-full h-full"
          />
        </dv-border-box12>
      </div>
    </div>
    <div class="h-1/2 text-blue-400 font-bold flex">
      <!-- 接诊排名 -->
      <div class="w-1/2">
        <dv-border-box12 class="p-2" :color="['#c7e1fd', '#5fa4f8']" :backgroundColor="'rgba(255, 255, 255, 1)'">
          <span class="ml-2 text-lg">医生接诊人数排名</span>
          <TopChart
            :data="topData"
            class="w-full"
            style="height: calc(100% - 56px)"
          />
        </dv-border-box12>
      </div>
      <!-- 接诊走势 -->
      <div class="w-1/2">
        <dv-border-box12 class="p-2" :color="['#c7e1fd', '#5fa4f8']" :backgroundColor="'rgba(255, 255, 255, 1)'">
          <span class="ml-2 text-lg">科室门诊人次走势</span>
          <LineChart
            :data="lineData"
            unit="人次"
            title="单位"
            class="w-full"
            style="height: calc(100% - 56px)"
          />
        </dv-border-box12>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const title = ref<string>("门诊人次科室分析");

import BarChart from "./barChart.vue";
import TopChart from "./topChart.vue";
import LineChart from "./lineChart.vue";

const barData = reactive<Array>([
  { name: "外科", value: 8000 },
  { name: "中医科", value: 7512 },
  { name: "内科", value: 7267 },
  { name: "神经科", value: 7032 },
  { name: "儿科", value: 6389 },
  { name: "感染科", value: 5813 },
  { name: "肿瘤科", value: 5554 },
  { name: "急诊科", value: 5090 },
  { name: "骨科", value: 4825 },
  { name: "妇产科", value: 4389 },
  { name: "全科医学门诊", value: 4012 },
  { name: "麻醉科门诊", value: 3534 }
]);
const topData = reactive<Array>([
  { name: "周杰伦", value: 8000 },
  { name: "朴树", value: 7512 },
  { name: "王力宏", value: 7267 },
  { name: "林俊杰", value: 7032 },
  { name: "五月天", value: 6389 },
  { name: "邓紫棋", value: 5813 },
  { name: "告五人", value: 5554 },
  { name: "周深", value: 5090 },
  { name: "韩红", value: 4825 },
  { name: "张惠妹", value: 4389 }
]);
const lineData = reactive<Array>([
  { name: "2023-05", value: 80 },
  { name: "2023-06", value: 75 },
  { name: "2023-07", value: 70 },
  { name: "2023-08", value: 63 },
  { name: "2023-09", value: 75 },
  { name: "2023-10", value: 79 },
  { name: "2023-11", value: 68 },
  { name: "2023-12", value: 82 },
  { name: "2024-01", value: 71 },
  { name: "2024-02", value: 69 },
  { name: "2024-03", value: 85 },
  { name: "2024-04", value: 78 }
]);
</script>

<style scoped lang="scss"></style>
